<template>
	<view>
		<view class="status">
			<view class="statusImg" v-if="orderListInfo.status===2" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/ddyqx@2x.png);height: 50px;'></view>
			<view class="statusImg" v-if="orderListInfo.status===0&&orderListInfo.failStatus===2" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tksb@2x.png)'></view>
			<view class="statusImg" v-if="orderListInfo.status===0&&orderListInfo.failStatus===3" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/ytk@2x.png)'></view>
			<view class="statusImg" v-if="orderListInfo.status===0&&orderListInfo.failStatus===1" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tkz@2x.png)'></view>
			<view class="statusImg" v-if="orderListInfo.status===1" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/dfk@2x.png);height: 50px;'></view>
			<view class="statusImg" v-if="orderListInfo.status===0&&orderListInfo.failStatus===0" style='background-image:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/ybm@2x.png);height: 50px;'></view>
		</view>
		<view>
			<!--退款说明-->
			<view class="tkInfo" v-if="orderListInfo.status===0&&orderListInfo.failStatus===3">
				<view class="colorOrange">退款总金额：￥{{refundInfo.price}}</view>
				<view class="colorGray">{{refundInfo.updateTime}}</view>
			</view>
			
			<view class="tkInfo" v-if="orderListInfo.status===0&&orderListInfo.failStatus===2" style="display: flex;">
				<view class="colorBlack" style="width: 150px;">失败原因：</view>
				<view class="colorBlack">
					{{refundInfo.shopRemark}}
				</view>
			</view>
			
			
			<view class="content">
				<image :src='orderListInfo.classImage' class="thumb" mode="widthFix"></image>
				<view style="width:80%;margin-left:10px;">
					<view class="title">{{orderListInfo.className
}}</view>
					<view class="detail"><text style="color:#666666">老师：{{orderListInfo.teacherName}}</text>
					<text style="font-size: 28rpx;font-weight: bold;">￥{{orderListInfo.classPrice}}</text></view>
				</view>
			</view>
			<!-- 退款中 退款失败 退款成功 -->
			<view class="info" v-if="((orderListInfo.status===0&&orderListInfo.failStatus===1) || orderListInfo.status===0&&orderListInfo.failStatus===2) || (orderListInfo.status===0&&orderListInfo.failStatus===3) ">
				<view>退款编号：<text class="colorBlack">{{refundInfo.orderNumber}}</text></view>
				<view>申请时间：<text class="colorBlack">{{refundInfo.createTime}}</text></view>
				<view>退款金额：<text class="colorOrange">￥{{refundInfo.price}}</text></view>
				<view>申请类型：<text class="colorBlack">{{refundInfo.typeName}}</text></view>
				<view>申请原因：<text class="colorBlack">{{refundInfo.causeName}}</text></view>
				<view>退款说明：<text class="colorBlack">{{refundInfo.refundRemark}}</text></view>
			</view>
			
			<!-- 代付款 订单已取消 -->
			<view class="info" v-if="orderListInfo.status===1||orderListInfo.status===2">
				<view>订单编号：<text class="colorBlack">{{orderListInfo.ordersNumber}}</text></view>
				<view>下单时间：<text class="colorBlack">{{orderListInfo.createTime}}</text></view>
				<view>订单金额：<text class="colorOrange">￥{{orderListInfo.classPrice}}</text></view>
			</view>
			<!-- 已报名 -->
			<view class="info" v-if="orderListInfo.status===0&&orderListInfo.failStatus===0">
				<view>订单编号：<text class="colorBlack">{{orderListInfo.ordersNumber}}</text></view>
				<view>下单时间：<text class="colorBlack">{{orderListInfo.createTime}}</text></view>
				<view>支付时间：<text class="colorBlack">{{orderListInfo.createTime}}</text></view>
				<view>订单金额：<text class="colorOrange">￥{{orderListInfo.classPrice}}</text></view>
				<view v-if="orderListInfo.type==='1'">支付方式：<text class="colorBlack">积分支付</text></view>
				<view v-if="orderListInfo.type==='2'">支付方式：<text class="colorBlack">微信支付</text></view>
			</view>
			
		</view>
		
		
		<view class="footer" v-if="orderListInfo.status===1">
			<view class="cancelBtn" @tap="cancel1">取消订单</view>
			<view class="applyBtn" @tap="open()">立即报名</view>
		</view>
		
		<view class="footer" v-if="orderListInfo.status===0&&orderListInfo.failStatus===0">
			<view class="cancelBtn" @click="goRefund(orderListInfo.ordersNumber)">申请退款</view>
			<view class="applyBtn" @tap="getclass">查看课程</view>
		</view>
		
		<view class="footer" v-if="orderListInfo.status===0&&orderListInfo.failStatus===1">
			<view class="applyBtn" @tap="notRefund">取消退款</view>
		</view>
		
		<view class="footer" v-if="orderListInfo.status===2">
			<view class="applyBtn" @tap="jumpclass">再次购买</view>
		</view>
		
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="pop-t">
					<image class="pop_images1" src="../../static/guanbi@2x.png" mode="" @tap="close()"></image>
					<view>选择支付方式</view>
				</view>
				<view class="pop-c">
					<text>￥</text>
					<text>{{orderListInfo.classPrice}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/jfzf@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/wxzf@2x.png" mode=""></image>
							<view class="pop-name">
								<text>{{item.name}}</text>
								<text v-if="item.value==='1'">(剩余{{userInfo.userInfo.accumulatePoints}}积分)</text>
							</view>
						</view>
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<view class="payment" type="default" @tap='confirm()
				'>
					立即支付
				</view>
		
		
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
			mapState,
			mapMutations
		} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		data() {
			return {
				ordersNumber:'',
				orderListInfo:"",
				refundInfo:'',
				items: [{
					value: '1',
					name: '积分支付'
					},
				{
					value: '2',
					name: '微信支付',
				    checked: 'true'
				}],
				current: 0,
				accessId:''
			}
		},
		onLoad(option) {
			this.accessId = uni.getStorageSync('accessId')
			this.ordersNumber = option.ordersNumber
			this.getClassInfo()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
				})
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			// 立即报名
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			goRefund(ordersNumber){
				uni.navigateTo({
					url:"apply_refund?ordersNumber="+ordersNumber,
				})
			},
			renderTime(date) {
			      var dateee = new Date(date).toJSON();
			      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			},
			getClassInfo(){
				let _this = this
						this.$api.getClassOrdersListInfo({
							ordersNumber:this.ordersNumber
						}).then((res) => {
						   	if (res.data.code == 200) {
						   		_this.orderListInfo = res.data.dataMap
								console.log(_this.orderListInfo)
								_this.orderListInfo.createTime = _this.renderTime(res.data.dataMap.createTime)
						   		if(this.orderListInfo.status===0&&this.orderListInfo.failStatus!==0){
						   			this.$api.ClassOrActivityRefundInfo({
						   				orderNumber:_this.orderListInfo.ordersNumber
						   			}).then((res) => {
						   			   	if (res.data.code == 200) {
						   			   		console.log(res.data.dataMap)
											this.refundInfo = res.data.dataMap
						   			   		// this.refundInfo.createTime = this.renderTime(res.data.dataMap.createTime)
											console.log(this.refundInfo.createTime)
						   		        }
						    	   })
						     }
				        }
				})
			},
			cancel1(){
				uni.showModal({
				    title: '提示',
				    content: '确定取消该订单？',
				    success: (res) =>{
				        if (res.confirm) {
				            console.log(this.orderListInfo.ordersNumber)
				            this.$api.cancelOrders({
				                 ordersNumber:this.orderListInfo.ordersNumber,
				            	}).then((res) => {
									console.log(res)
				                if (res.data.code == 200) {
				            			let _this = this
				            					this.$api.getClassOrdersListInfo({
				            						ordersNumber:this.orderListInfo.ordersNumber
				            					}).then((res) => {
													console.log(res)
				            					   	if (res.data.code == 200) {
				            					   		_this.orderListInfo = res.data.dataMap
				            							console.log(_this.orderListInfo)
				            							_this.orderListInfo.createTime = _this.renderTime(res.data.dataMap.createTime)
				            					  
				            			        }
				            			})
										
										
				                 }else{
				            		 uni.showToast({
				            		 	title: res.data.message,
				            		 	duration: 1000,
				            		 	icon: "none"
				            		 });
				            	 }
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			notRefund(){
				uni.showModal({
				    title: '提示',
				    content: '确定取消退款?',
				    success: (res)=> {
				        if (res.confirm) {
				            console.log(this.refundInfo.orderNumber)
				            this.$api.cancelRefund({
				                 orderNumber:this.refundInfo.orderNumber,
				            	 refundStatus: 3
				            	}).then((res) => {
				            		if (res.data.success) {
				            			uni.$emit("carData", 2)
				            			uni.navigateBack(1)
				            		} else {
				            			uni.showToast({
				            				title: res.data.message,
				            				duration: 1000,
				            				icon: "none"
				            			});
				            		}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			jumpclass(){
							console.log(1)
							uni.navigateTo({
								url: '../index/course_detail?id='+this.orderListInfo.classOrActivityId,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});	
						},
			getclass(){
				uni.switchTab({
					url: '../course/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			confirm(e) {
				let type=1
				if(this.current===0){
					type=1
					this.applyActivity(this.orderListInfo.ordersNumber,type)
				}
				if(this.current===1){
					type=2
					this.applyActivity1(this.orderListInfo.ordersNumber,type)
				}
				
			},
			applyActivity(ordersNumber,type) {
				let _this = this
				this.$api.applyActivity({
					ordersNumber: ordersNumber,
					type:type
				}).then((res) => {
					if(res.data.success){
					if(type==1){ //余额支付
						if (res.data.success) {					
						_this.activityInfo.isApply = 1
						uni.showToast({
							title: '报名成功！',
							duration: 1500,
							icon: "none",
							
						});
						_this.close()
								this.$api.getClassOrdersListInfo({
									ordersNumber:_this.orderListInfo.ordersNumber
								}).then((res) => {
									console.log(res)
								   	if (res.data.code == 200) {
								   		_this.orderListInfo = res.data.dataMap
										console.log(_this.orderListInfo)
										_this.orderListInfo.createTime = _this.renderTime(res.data.dataMap.createTime)
								  
						        }
						})
						
						} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none"
						});
						if (res.data.code == 20020) {
							setTimeout(function() {
								uni.navigateTo({
									url: 'recharge'
								})
							}, 1000);
						}
			
					}
				
					}else{
						_this.close()
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none"
						});
					}
			}
				})
			},
			applyActivity1(ordersNumber,type) {
				let _this = this
				this.$api.applyActivity({
					ordersNumber: ordersNumber,
					payType:'JSAPI',
					type:2,
					accessId:_this.accessId
				}).then((res) => {
					if(res.data.success){
					 if(type==2){	
							uni.requestPayment({
								appId:res.data.dataMap.appid,
							    provider: 'wxpay',
							    timeStamp:res.data.dataMap.timeStamp,
							    nonceStr: res.data.dataMap.nonceStr,
							    package: res.data.dataMap.package,
							    signType: 'MD5',
							    paySign: res.data.dataMap.paySign,
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功',
										duration: 500,
										icon: "none"
									});
									_this.close()
											this.$api.getClassOrdersListInfo({
												ordersNumber:_this.orderListInfo.ordersNumber
											}).then((res) => {
												console.log(res)
											   	if (res.data.code == 200) {
											   		_this.orderListInfo = res.data.dataMap
													console.log(_this.orderListInfo)
													_this.orderListInfo.createTime = _this.renderTime(res.data.dataMap.createTime)
											  
									        }
									})
									
							    },
							    fail: function (err) {
							       uni.showToast({
							       	title: '支付失败',
							       	duration: 500,
							       	icon: "none"
							       });
							    }
							});

					}
					}else{
						_this.close()
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none"
						});
					}
			
				})
			},
		}
	}
</script>

<style lang="scss">
	.payment{
		width: 670rpx;
		height: 88rpx;
		background-color: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 100rpx;
		text-align: center;
		line-height: 88rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
  page{background-color: #F8F8F8;}
  
  .tkInfo{
	  padding: 10px 20px;
	  background-color: white;
	  margin-top:10px;
	  line-height: 50rpx;
  }
  .status{
	  text-align: center;
	  background-color: white;
	  padding:30px 0;
	  .statusImg{
		  background-size:contain;
		  width: 100%;
		  background-repeat: no-repeat;
		  background-position: center center;
		  height: 20px;
	  }
  }
  .info{
	  background: white;
	  line-height: 50rpx;
	  border-top:1px solid #EEEEEE;
	  padding:10px 20px;
	  color:#999999;
  }
  
  .content{display: flex;
     padding:10px 20px;
	 background:white;
	 margin-top:10px;
	 
     .thumb{border-radius: 5px;width:180rpx;height: 115rpx !important;}
  		 .title{font-size: 28rpx;font-weight: bold;}
  		 .detail{display: flex;justify-content: space-between;margin-top:20px;}
  }
  
  
  .footer{
  	position: fixed;
  	bottom: 0;
  	left:0;
  	width:100%;
  	background-color: white;
  	padding:20px 5px;
  	display: flex;
  	align-items: center;
  	height: 25px;
  	justify-content:flex-end;
	.cancelBtn{
		text-align: center;
		border:1px solid #999999;
		border-radius: 20px;
		height: 70rpx;
		line-height: 70rpx;
		width: 25%;
	}
  	.applyBtn{
  		margin-left:10px;
  		text-align: center;
		border:1px solid #ff5551;
  		background: rgb(254,85,51);
  		border-radius: 20px;
  		color:white;
		width: 25%;
		height: 70rpx;
  		line-height: 70rpx;
		margin-right: 40rpx;
  	}
  }
</style>
